<template>
  <div class="goods home">
    <div ref="mescroll" class="mescroll">
      <swiper :options="bannerHome">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in banner" :key="index">
          <a v-if="item.link" :href="item.link"><img :src="item.pic" alt=""></a>
          <img v-else :src="item.pic">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="nav">
        <div class="nav-item" v-for="(item, index) in classify" :key="index" @click="router({path: './goodsList', query:{id: item.id}})">
          <img v-if="item.img" :src="item.img" alt="">
          <p>{{item.title}}</p>
        </div>
        <div class="nav-item">
          <img src="@/assets/shangcheng5.png" alt="">
          <p>其他</p>
        </div>
      </div>
      <div class="section bgfff">
        <p class="title clear">
          推荐
        </p>
        <div class="goods">
          <img v-if="goods_re" :src="goods_re.img1" class="goods-hot" alt="" @click="router({path: './goodsDetails', query:{id: goods_re.id}})">
          <div class="goods-list">
            <div class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="router({path: './goodsDetails', query: {id: item.id}})">
              <span class="img"><img v-if="item.img" :src="item.img" alt=""></span>
              <p class="goods-name">{{item.title}}</p>
              <p class="price">
                <span class="curr">￥{{item.price}}</span>
                <span class="before">原价<s>￥{{item.market_price}}</s></span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="cart" @click="router({path: './cart'})">
        <img src="@/assets/shangcheng6.png" alt="">
        <span class="num">{{cart_num}}</span>
      </div>
    </div>
  </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { getClassify, getGoodsIndex, getGoodsList, getCarts, getBanner } from '@/api/api'

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data () {
    return {
      bannerHome: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      mescroll: null,
      classify: [],
      goods_re: null,
      goodsList: [],
      cart_num: 0,
      banner: [],
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid');
    this.get_classify()
    this.get_goods_index()
    this.get_carts()
    this.get_banner()
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    get_banner() {
      getBanner(2).then((res) => {
        console.log(res)
        this.banner = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    router (path) {
      this.$router.push(path)
    },
    // 获取分类
    get_classify() {
      getClassify().then((res) => {
        this.classify = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 获取首页商品
    get_goods_index() {
      getGoodsIndex().then((res) => {
        this.goods_re = res.data.info[0]
      }).catch((err) => {
        console.dir(err)
      })
    },    
    upCallback (page) {      
      getGoodsList(page.num, page.size, 0).then((res) => {
        if (page.num == 1){
          this.goodsList = []
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info);
        })
        this.goodsList = this.goodsList.concat(res.data.info)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    },
    // 获取购物车列表
    get_carts() {
      getCarts(this.uid).then((res) => {
        if(res.data.info.lists == null){
          this.cart_num = 0;
          return;
        }
        this.cart_num = res.data.info.lists.length
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .home
    max-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #f5f5f5
      padding-bottom 4rem
      .swiper-demo-img
        img
          object-fit cover
          height 24rem
      .section
        margin-bottom 1rem
        &:last-child
          margin-bottom 0
        .title
          line-height 5.5rem
          height 5.5rem
          font-size 1.8rem
          color #333
          font-weight bold
          padding-left 1.5rem
          overflow hidden
        .goods
          .goods-hot
            margin 0 1.5rem
            box-sizing border-box
            border-radius .4rem
            overflow hidden
            width calc(100% - 3rem)
          .goods-list
            overflow hidden
            padding 0 1.5rem
            margin-top 1rem
            padding-bottom 1.5rem
            .goods-item
              float left
              width calc(50% - .75rem)
              margin-right 1.5rem
              margin-bottom 1rem
              &:nth-child(2n)
                margin-right 0
              .img
                display flex
                height calc(50vw - 2.25rem)
                img
                  object-fit cover
              .goods-name
                color #333
                font-size 1.3rem
                font-weight 400
                line-height 2.4rem
                text-overflow ellipsis
                overflow hidden
                white-space nowrap
                margin-bottom .5rem
              .curr
                font-size 1.7rem
                color #333
                font-weight bold
              .before
                color #999
                font-size 1.2rem
                line-height 2.2rem
                margin-left 1rem
      .nav
        display flex
        background-color #fff
        margin-bottom 1rem
        padding 3rem 0
        .nav-item
          flex 1
          text-align center
          img
            width 3.2rem
            display inline-block
          p
            font-size 1.2rem
            color #333
      .cart
        position fixed
        right 0
        bottom 6rem
        width 8rem
        .num
          position absolute
          right 1rem
          top 1rem
          color #fff
          background-color #FE9700
          border-radius .2rem
          padding 0 .3rem
          font-size 1rem
</style>